<template>
  <div class="dashboard-container" ref="parentContainer">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <dv-border-box-2 :key="`${width}x${height}`">
            <dv-charts :option="lineOption" style="height: 230px;margin-top: 0"/>
          </dv-border-box-2>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <dv-border-box-6 :key="`${width}x${height}`">
            <dv-charts :option="barOption" style="height: 200px;width:100%;margin-top: 0"/>
          </dv-border-box-6>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <dv-border-box-6 :key="`${width}x${height}`">
            <dv-charts :option="pieOption"/>
          </dv-border-box-6>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-charts :option="ldOption"/>
          </dv-border-box-7>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <dv-border-box-10 :key="`${width}x${height}`">
            <dv-charts :option="dashOption" style="padding-top: 20px"/>
          </dv-border-box-10>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <dv-border-box-10 :key="`${width}x${height}`">
            <dv-conical-column-chart :config="conicalConfig" style="width:280px;height:120px; margin: 0 auto"/>
          </dv-border-box-10>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-capsule-chart :config="capsuleConfig" style="width:250px;height:130px; margin: 0 auto"/>
          </dv-border-box-7>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {pieData} from "@/api/dashboard";

export default {
  name: 'Dashboard',
  data() {
    return {
      width: 0,
      height: 0,
      lineOption: {
        grid: {
          top: 50,
          right: 30,
          bottom: 60,
          left: 50
        },
        title: {
          text: '新生入学',
          offset: [-570, -20],
          style: {
            fill: '#aaa',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          data: 'value'
        },
        series: [
          {
            data: [120, 223, 190, 210, 350, 420, 398],
            type: 'line',
            lineArea: {
              show: true,
              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            }
          }
        ]
      },
      barOption: {
        grid: {
          top: 50,
          right: 10,
          bottom: 60,
          left: 40
        },
        title: {
          text: '部门人数',
          offset: [-270, -20],
          style: {
            fill: '#67e0e3',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        xAxis: {
          data: ['市场部', '教学部', '教质部', '社招部', '研发部']
        },
        yAxis: {
          data: 'value'
        },
        series: [
          {
            data: [120, 223, 190, 210, 350],
            type: 'bar',
            gradient: {
              color: ['#37a2da', '#67e0e3']
            }
          }
        ]
      },
      pieOption: {},
      ldOption: {
        radar: {
          indicator: [
            {name: 'Python', max: 300},
            {name: 'Java', max: 300},
            {name: 'Web', max: 300}
          ]
        },
        series: [
          {
            type: 'radar',
            data: [111, 256, 178, 152, 266, 132]
          }
        ]
      },
      dashOption: {
        title: {
          text: '出勤率',
          offset: [-110, -30],
          style: {
            fill: '#ff4700',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{name: 'itemA', value: 55}],
            axisLabel: {
              formatter: '{value}%'
            },
            radius: '80%',
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      conicalConfig: {
        data: [
          {
            name: '文本',
            value: 55
          },
          {
            name: '音视频',
            value: 120
          },
          {
            name: '图片',
            value: 71
          },
          {
            name: '压缩包',
            value: 66
          },
          {
            name: '其它',
            value: 35
          }
        ]
      },
      capsuleConfig: {
        data: [
          {
            name: 'Python基础',
            value: 167
          },
          {
            name: '数据分析',
            value: 67
          },
          {
            name: 'Mysql',
            value: 123
          },
          {
            name: 'Oracle',
            value: 55
          },
          {
            name: 'Django',
            value: 98
          }
        ]
      }

    }
  },
  mounted() {
    // todo  监听父容器尺寸变化    边框组件中添加 :key="`${width}x${height}`"
    new ResizeObserver(entries => {
      const rect = entries[0].contentRect;
      this.width = Math.floor(rect.width);
      this.height = Math.floor(rect.height);
    }).observe(this.$refs.parentContainer);
  },
  created() {
    pieData().then(response => {
      console.log(JSON.stringify(response.data.pieData))
      this.pieOption = {
        title: {
          text: '专业人数',
          offset: [-260, -30],
          style: {
            fill: 'green',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        series: [
          {
            type: 'pie',
            data: response.data.pieData,
            insideLabel: {
              show: true
            },
            roseType: true,
            radius:  '80%',
          }
        ]
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}


.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 163px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.bg-purple-dark {
  background: #eee;
  height: 200px;
}
</style>
